/* eslint-disable react/no-multi-comp */
import classnames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import once from 'lodash/once';

import s from './Icon.module.css';

const SvgIcons = () => (
	<svg
		className={s.defs}
		aria-hidden="true"
		xmlns="http://www.w3.org/2000/svg"
		xmlnsXlink="http://www.w3.org/1999/xlink"
	>
		<defs>
			<symbol id="icon-home" viewBox="0 0 32 32">
				<path d="M4.107 32c-2.267-0.002-4.105-1.839-4.107-4.107v-17.085l0.545-0.391c0.907-0.653 2.892-2.107 4.995-3.645 4.464-3.268 7.675-5.615 8.335-6.045 0.581-0.453 1.321-0.726 2.125-0.726 0.796 0 1.53 0.268 2.116 0.719l-0.008-0.006c1.088 0.679 5.58 3.991 9.188 6.653 1.867 1.375 3.467 2.56 4.155 3.048l0.549 0.385v17.093c-0.002 2.267-1.839 4.105-4.107 4.107h-0zM15.307 2.917c-0.653 0.425-4.848 3.497-8.219 5.965-1.756 1.285-3.429 2.511-4.469 3.265v15.745c0 0.824 0.668 1.492 1.492 1.492v0h23.783c0.823-0.001 1.491-0.668 1.491-1.492v0-15.747c-0.833-0.607-2.157-1.583-3.641-2.677-3.383-2.496-8.017-5.913-9.019-6.533-0.207-0.156-0.457-0.268-0.729-0.315l-0.010-0.001c-0.261 0.043-0.493 0.148-0.686 0.299l0.003-0.002zM14.417 20.117v-6.319c0-0.873 0.708-1.581 1.581-1.581s1.581 0.708 1.581 1.581v0 6.319c0 0.873-0.708 1.581-1.581 1.581s-1.581-0.708-1.581-1.581v0z"></path>
			</symbol>
			<symbol id="icon-tip" viewBox="0 0 16 16" fill="none">
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M0.888889 8.00003C0.888889 4.08892 4.08889 0.888916 8 0.888916C11.9111 0.888916 15.1111 4.08892 15.1111 8.00003C15.1111 11.9111 11.9111 15.1111 8 15.1111C4.08889 15.1111 0.888889 11.9111 0.888889 8.00003ZM1.77778 8.00003C1.77778 11.4667 4.53333 14.2222 8 14.2222C11.4667 14.2222 14.2222 11.4667 14.2222 8.00003C14.2222 4.53336 11.4667 1.7778 8 1.7778C4.53333 1.7778 1.77778 4.53336 1.77778 8.00003Z"
					fill="currentColor"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M6.625 5.56757C7 5.18919 7.5 5 8.125 5C8.6875 5 9.125 5.12613 9.5 5.5045C9.8125 5.81982 10 6.26126 10 6.76577C10 7.20721 9.9375 7.58559 9.6875 7.83784C9.63992 7.93386 9.48367 8.06643 9.21875 8.29119C9.13568 8.36167 9.04193 8.44121 8.9375 8.53153C8.75 8.65766 8.625 8.78378 8.5625 8.97297C8.5 9.16216 8.4375 9.35135 8.4375 9.54054V9.66667H7.5V9.54054C7.5 9.22523 7.5 8.90991 7.625 8.72072C7.75 8.46847 8.125 8.09009 8.625 7.58559L8.8125 7.3964C9 7.20721 9.0625 7.01802 9.0625 6.76577C9.0625 6.51351 9 6.26126 8.8125 6.07207C8.625 5.88288 8.375 5.81982 8.0625 5.81982C7.625 5.81982 7.375 5.94595 7.1875 6.1982C7 6.38739 6.9375 6.7027 6.9375 7.08108H6C6 6.45045 6.1875 5.94595 6.625 5.56757ZM7.53333 10.5333C7.66667 10.4 7.8 10.3333 8 10.3333C8.2 10.3333 8.33333 10.4 8.46667 10.5333C8.6 10.6667 8.66667 10.8 8.66667 11C8.66667 11.2 8.6 11.3333 8.46667 11.4667C8.33333 11.6 8.2 11.6667 8 11.6667C7.8 11.6667 7.66667 11.6 7.53333 11.4667C7.4 11.3333 7.33333 11.2 7.33333 11C7.33333 10.8 7.4 10.6667 7.53333 10.5333Z"
					fill="currentColor"
				/>
			</symbol>
			<symbol id="icon-right-circle" viewBox="0 0 14 14" fill="none">
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M14 7C14 10.8658 10.8658 14 7 14C3.13425 14 0 10.8658 0 7C0 3.13425 3.13425 0 7 0C10.8658 0 14 3.13425 14 7ZM5.46817 5.12167L7.81667 7L5.46817 8.87833C5.29807 9.00612 5.21103 9.21637 5.24103 9.427C5.27104 9.63762 5.41333 9.8152 5.61235 9.8904C5.81137 9.9656 6.03554 9.92649 6.19733 9.78833L9.114 7.455C9.252 7.34429 9.3323 7.17692 9.3323 7C9.3323 6.82308 9.252 6.65571 9.114 6.545L6.19733 4.21167C6.03554 4.07351 5.81137 4.0344 5.61235 4.1096C5.41333 4.1848 5.27104 4.36238 5.24103 4.573C5.21103 4.78363 5.29807 4.99388 5.46817 5.12167Z"
					fill="currentColor"
				/>
			</symbol>
			<symbol id="icon-expiration-time" viewBox="0 0 16 16" fill="none">
				<path
					d="M5.57142 14.2754C5.52342 14.2754 5.46742 14.2674 5.41942 14.2594C2.22742 13.4274 0.00341797 10.5474 0.00341797 7.25135C0.00341797 3.25935 3.25142 0.0113525 7.24342 0.0113525C11.2354 0.0113525 14.4834 3.25935 14.4834 7.25135C14.4834 7.61935 14.4514 7.99535 14.4034 8.35535C14.3554 8.68335 14.0434 8.90735 13.7234 8.85935C13.3954 8.81135 13.1714 8.49935 13.2194 8.17935C13.2674 7.87535 13.2914 7.56335 13.2914 7.25935C13.2914 3.93135 10.5794 1.21935 7.25142 1.21935C3.92342 1.21935 1.20342 3.92335 1.20342 7.25135C1.20342 10.0034 3.05942 12.4034 5.71542 13.0994C6.03542 13.1794 6.22742 13.5074 6.14742 13.8274C6.07542 14.0994 5.83542 14.2754 5.57142 14.2754Z"
					fill="#F88C00"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M8.68329 9.32338C8.79529 9.41138 8.93129 9.45138 9.05929 9.45138C9.23529 9.45138 9.41129 9.37138 9.53129 9.21938C9.73928 8.96338 9.69129 8.58738 9.43529 8.37938L7.66729 6.96338V2.89138C7.66729 2.56338 7.39529 2.29138 7.06729 2.29138C6.73929 2.29138 6.46729 2.56338 6.46729 2.89138V7.25138C6.46729 7.43538 6.54729 7.61138 6.69129 7.72338L8.68329 9.32338ZM12.1393 8.58738L15.5313 14.3074C15.7313 14.6434 15.7473 14.9954 15.5793 15.2754C15.4113 15.5554 15.0913 15.7154 14.6993 15.7154H7.89929C7.49929 15.7154 7.17929 15.5554 7.01129 15.2754C6.84329 14.9954 6.85929 14.6434 7.05929 14.3074L10.4433 8.58738C10.6433 8.25138 10.9553 8.05938 11.2913 8.05938C11.6353 8.05938 11.9393 8.25138 12.1393 8.58738ZM11.2913 14.8274C10.9633 14.8274 10.6913 14.5554 10.6913 14.2274C10.6913 13.8994 10.9633 13.6274 11.2913 13.6274C11.6193 13.6274 11.8913 13.8994 11.8913 14.2274C11.8913 14.5554 11.6273 14.8274 11.2913 14.8274ZM11.6033 12.8034L11.9313 10.6274C11.9553 10.4434 11.8113 10.2754 11.6193 10.2754H10.9633C10.7793 10.2754 10.6273 10.4434 10.6513 10.6274L10.9793 12.8034C10.9953 12.9634 11.1313 13.0834 11.2913 13.0834C11.4513 13.0834 11.5873 12.9634 11.6033 12.8034Z"
					fill="#F88C00"
				/>
			</symbol>
			<symbol id="icon-expirated-time" viewBox="0 0 16 16" fill="none">
				<path
					d="M5.57093 14.2754C5.52293 14.2754 5.46693 14.2674 5.41893 14.2594C2.22693 13.4274 0.00292969 10.5474 0.00292969 7.25135C0.00292969 3.25935 3.25093 0.0113525 7.24293 0.0113525C11.2349 0.0113525 14.4829 3.25935 14.4829 7.25135C14.4829 7.61935 14.4509 7.99535 14.4029 8.35535C14.3549 8.68335 14.0429 8.90735 13.7229 8.85935C13.3949 8.81135 13.1709 8.49935 13.2189 8.17935C13.2669 7.87535 13.2909 7.56335 13.2909 7.25935C13.2909 3.93135 10.5789 1.21935 7.25093 1.21935C3.92293 1.21935 1.20293 3.92335 1.20293 7.25135C1.20293 10.0034 3.05893 12.4034 5.71493 13.0994C6.03493 13.1794 6.22693 13.5074 6.14693 13.8274C6.07493 14.0994 5.83493 14.2754 5.57093 14.2754Z"
					fill="#D94A43"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M8.68377 9.32338C8.79577 9.41138 8.93177 9.45138 9.05977 9.45138C9.23577 9.45138 9.41177 9.37138 9.53177 9.21938C9.73977 8.96338 9.69177 8.58738 9.43577 8.37938L7.66777 6.96338V2.89138C7.66777 2.56338 7.39577 2.29138 7.06777 2.29138C6.73977 2.29138 6.46777 2.56338 6.46777 2.89138V7.25138C6.46777 7.43538 6.54777 7.61138 6.69177 7.72338L8.68377 9.32338ZM12.1398 8.58738L15.5318 14.3074C15.7318 14.6434 15.7478 14.9954 15.5798 15.2754C15.4118 15.5554 15.0918 15.7154 14.6998 15.7154H7.89977C7.49977 15.7154 7.17977 15.5554 7.01177 15.2754C6.84377 14.9954 6.85977 14.6434 7.05977 14.3074L10.4438 8.58738C10.6438 8.25138 10.9558 8.05938 11.2918 8.05938C11.6358 8.05938 11.9398 8.25138 12.1398 8.58738ZM11.2918 14.8274C10.9638 14.8274 10.6918 14.5554 10.6918 14.2274C10.6918 13.8994 10.9638 13.6274 11.2918 13.6274C11.6198 13.6274 11.8918 13.8994 11.8918 14.2274C11.8918 14.5554 11.6278 14.8274 11.2918 14.8274ZM11.6038 12.8034L11.9318 10.6274C11.9558 10.4434 11.8118 10.2754 11.6198 10.2754H10.9638C10.7798 10.2754 10.6278 10.4434 10.6518 10.6274L10.9798 12.8034C10.9958 12.9634 11.1318 13.0834 11.2918 13.0834C11.4518 13.0834 11.5878 12.9634 11.6038 12.8034Z"
					fill="#D94A43"
				/>
			</symbol>
			<symbol
				id="icon-tree-root"
				viewBox="3 2 18 20"
				strokeWidth="1"
				stroke="currentColor"
				fill="none"
				strokeLinecap="round"
				strokeLinejoin="round"
			>
				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
				<polyline points="5 12 3 12 12 3 21 12 19 12" />
				<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" fill="none" />
				<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" fill="none" />
			</symbol>
			<symbol id="icon-tree-toggle" viewBox="0 0 10 8">
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M0 0L5 8L10 0H0Z"
					fill="currentColor"
				/>
			</symbol>
			<symbol id="icon-tree-folder" viewBox="0 0 14 14">
				<path
					d="M8.83046 2.87556L8.94888 2.94628H9.08682H12.4C13.0075 2.94628 13.5 3.43877 13.5 4.04628V12.4C13.5 13.0075 13.0075 13.5 12.4 13.5H1.6C0.992487 13.5 0.5 13.0075 0.5 12.4V1.6C0.5 0.992487 0.992487 0.5 1.6 0.5H4.85252L8.83046 2.87556Z"
					stroke="currentColor"
					strokeWidth="1"
					fill="none"
				/>
				<rect
					y="4.73846"
					width="14"
					height="1"
					stroke="none"
					fill="currentColor"
				/>
			</symbol>
			<symbol id="icon-tree-leaf" viewBox="0 0 14 14">
				<path
					d="M9.58222 0.843367L12.1984 3.60414C12.3921 3.80847 12.5 4.07927 12.5 4.36077V12.25C12.5 12.9501 11.9467 13.5 11.2857 13.5H2.71429C2.05332 13.5 1.5 12.9501 1.5 12.25V1.75C1.5 1.04987 2.05332 0.5 2.71429 0.5H8.78378C9.08578 0.5 9.3745 0.624161 9.58222 0.843367Z"
					strokeLinejoin="round"
					stroke="currentColor"
					strokeWidth="1"
					fill="none"
				/>
				<rect
					x="2.6001"
					y="3.20001"
					width="6"
					height="1"
					rx="0.5"
					fill="currentColor"
				/>
				<rect
					x="2.6001"
					y="6.20001"
					width="9"
					height="1"
					rx="0.5"
					fill="currentColor"
				/>
				<rect
					x="2.6001"
					y="9.20001"
					width="9"
					height="1"
					rx="0.5"
					fill="currentColor"
				/>
			</symbol>
			<symbol id="icon-tree-change" viewBox="0 0 14 14" fill="none">
				<circle cx="7" cy="7" r="7" fill="currentColor" />
				<path
					d="M9.99467 6.30871C10.0677 6.57503 10.3428 6.73172 10.6091 6.65869C10.8754 6.58567 11.0321 6.31058 10.9591 6.04427L9.99467 6.30871ZM3.6078 5.14841C3.47328 5.38957 3.55975 5.69412 3.80091 5.82863C4.04208 5.96314 4.34663 5.87668 4.48114 5.63552L3.6078 5.14841ZM4.2152 7.9263C4.13892 7.6609 3.86194 7.50759 3.59654 7.58386C3.33114 7.66014 3.17783 7.93712 3.2541 8.20252L4.2152 7.9263ZM10.8584 8.46933C10.9528 8.20983 10.819 7.92293 10.5595 7.82851C10.3 7.7341 10.0131 7.86793 9.91868 8.12743L10.8584 8.46933ZM10.9591 6.04427C10.8703 5.72054 10.7392 5.40323 10.5641 5.1L9.69809 5.6C9.83007 5.8286 9.9283 6.06667 9.99467 6.30871L10.9591 6.04427ZM10.5641 5.1C9.45955 3.18683 7.01319 2.53133 5.10001 3.6359L5.60001 4.50192C7.03489 3.67349 8.86966 4.16512 9.69809 5.6L10.5641 5.1ZM5.10001 3.6359C4.45245 4.00977 3.94798 4.53848 3.6078 5.14841L4.48114 5.63552C4.73581 5.1789 5.11311 4.78303 5.60001 4.50192L5.10001 3.6359ZM3.2541 8.20252C3.34248 8.51005 3.46929 8.81141 3.63591 9.1L4.50194 8.6C4.37632 8.38241 4.28129 8.15627 4.2152 7.9263L3.2541 8.20252ZM3.63591 9.1C4.74048 11.0132 7.18684 11.6687 9.10001 10.5641L8.60001 9.69807C7.16514 10.5265 5.33037 10.0349 4.50194 8.6L3.63591 9.1ZM9.10001 10.5641C9.94705 10.0751 10.5482 9.32189 10.8584 8.46933L9.91868 8.12743C9.68589 8.76727 9.23592 9.33093 8.60001 9.69807L9.10001 10.5641Z"
					fill="var(--color-bg)"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M3.18937 6.55377C3.2158 6.4246 3.37836 6.38104 3.46583 6.47969L4.56532 7.7196C4.64424 7.80859 4.60191 7.94952 4.48702 7.9803L3.0553 8.36393C2.94041 8.39472 2.83329 8.29383 2.85714 8.17731L3.18937 6.55377Z"
					fill="var(--color-bg)"
				/>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M10.8231 7.15241C10.7966 7.28158 10.6341 7.32513 10.5466 7.22649L9.44713 5.98658C9.36821 5.89759 9.41054 5.75666 9.52543 5.72587L10.9572 5.34225C11.072 5.31146 11.1792 5.41234 11.1553 5.52887L10.8231 7.15241Z"
					fill="var(--color-bg)"
				/>
			</symbol>
			<symbol id="icon-tree-abnormal" viewBox="0 0 14 14" fill="none">
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M8.6126 0.997157L13.8092 11.3904C14.2546 12.2812 13.8936 13.3643 13.0028 13.8096C12.7525 13.9348 12.4764 14 12.1964 14H1.80316C0.807302 14 0 13.1927 0 12.1968C0 11.9169 0.0651753 11.6408 0.190365 11.3904L5.38701 0.997157C5.83237 0.106435 6.91548 -0.254601 7.8062 0.19076C8.15516 0.36524 8.43812 0.648196 8.6126 0.997157Z"
					fill="currentColor"
				/>
				<circle cx="7" cy="11.5" r="0.5" fill="var(--color-bg)" />
				<rect
					x="6.5"
					y="3"
					width="1"
					height="7"
					rx="0.5"
					fill="var(--color-bg)"
				/>
			</symbol>
		</defs>
	</svg>
);

const renderIcons = once(() => {
	const el = document.createElement('div');
	document.body.appendChild(el);
	ReactDOM.render(<SvgIcons />, el);
});

export default function Icon({ type, className, ...props }) {
	React.useEffect(renderIcons, []);

	return (
		<svg
			{...props}
			className={classnames(className, s.icon, s[`icon-${type}`])}
		>
			<use xlinkHref={`#icon-${type}`} />
		</svg>
	);
}

Icon.propTypes = {
	className: PropTypes.string,
	type: PropTypes.string.isRequired,
};

Icon.defaultProps = {
	className: '',
};
